<template>
    <div id="VNumberSelect" v-popover:popover4 class="iconfont icon-optimise">
        <el-popover
            ref="popover4"
            v-model="visible"
            width="320"
            placement="bottom"
            trigger="click">
            <div class="first-child" v-if="type == 'all'">
                <div class="radio-item">
                    <el-radio v-model="radio" label="1">使用离散数字(没有区间)</el-radio>
                </div>
                <div class="radio-item">
                    <el-radio v-model="radio" label="2" style="margin: 12px 0">使用默认区间</el-radio>
                </div>
                <div class="radio-item">
                    <el-radio v-model="radio" label="3">使用自定义区间</el-radio>
                </div>
                <el-collapse-transition>
                    <div v-show="isShow">
                        <div class="listItem" v-for="(item,index) in inputs" :key="index">
                            区间{{index+1}}：
                            [
                            <span class="item">
                  <span v-if="index==0" style="width: 70px;display: inline-block">{{inputs[index].start}}</span>
                  <el-input v-model="inputs[index].start" size="mini" style="width: 70px;height: 24px;" v-if="index!=0"
                            disabled></el-input>
                </span>,
                            <span class="item">
                  <span v-if="index==inputs.length-1"
                        style="width: 70px;display: inline-block">{{inputs[index].end}}</span>
                  <el-input v-if="index!=inputs.length-1" v-model="inputs[index].end" size="mini"
                            style="width: 70px;height: 24px;"></el-input>
                </span>
                            <span>)</span>
                            <span v-if="index==inputs.length-1&&inputs.length!=2" class="iconfont icon-close cursor"
                                  @click="del"></span>
                        </div>
                        <div @click="add" class="cursor" style="color: #409EFF;margin-top: 15px"><i
                            class="iconfont icon-add"></i>增加区间
                        </div>
                    </div>
                </el-collapse-transition>
                <div class="bottomBtn">
                    <el-button type="primary" size="mini" @click="visible=false">取消</el-button>
                    <el-button type="success" size="mini" v-prevent-re-click @click="sure">确定</el-button>
                </div>
            </div>
            <div class="second-child" v-if="type == 'time'">
                <el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <div style="margin: 15px 0">
                    <el-radio v-model="radio1" label="1">汇总</el-radio>
                </div>
                <div>
                    <el-radio v-model="radio1" label="2">不汇总</el-radio>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<script>
    export default {
        name: 'v-number-select',
        model: {
            prop: 'modelValue',
            event: 'change'
        },
        props: {
            modelValue: '',
            type: '',
            options: Array
        },
        data () {
            return {
                radio: '',
                radio1: '',
                visible: false,
                inputs: [
                    {
                        start: '-∞', end: ''
                    },
                    {
                        start: '', end: '+∞'
                    }
                ],
                dataModelValue: this.modelValue,
                value: '',
                isShow: false
            }
        },
        methods: {
            add () {
                this.inputs.splice(this.inputs.length - 1, 0, {start: '', end: ''})
            },
            del () {
                if (this.inputs.length === 2) return
                this.inputs.splice(this.inputs.length - 2, 1)
            },
            sure () {
                this.visible = false
                if (this.radio === '3') {
                    this.$emit('change', this.dataModelValue = this.inputs)
                } else {
                    this.$emit('change', this.dataModelValue = this.radio)
                }
            }
        },
        watch: {
            radio: function () {
                if (this.radio === '3') {
                    this.isShow = true
                } else {
                    this.isShow = false
                }
            },
            inputs: {
                handler: function (val, oldVal) {
                    for (let i = 0; i < this.inputs.length; i++) {
                        if (i !== 0) {
                            this.inputs[i].start = this.inputs[i - 1].end
                        }
                    }
                },
                deep: true
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    #VNumberSelect:hover
        color #409EFF

    #VNumberSelect
        color #D8DCE5
        width 15px;
        height 20px;
        border none
        font-size 20px;

    .radio-item
        width 255px;

    .listItem
        margin-top 10px
        .item
            display inline-block
            margin 0 10px

    .bottomBtn
        height 30px
        margin-top 20px;
        text-align right

    .el-radio + .el-radio
        margin 0
</style>
